<!-- src/views/visual/VisualAlarms.vue -->
<template>
  <main class="main-content">
    <div class="breadcrumb">
      <span class="breadcrumb-item">视联网管理</span>
      <span class="breadcrumb-separator">/</span>
      <span class="breadcrumb-item active">告警管理</span>
    </div>                
    <div class="card">
      <div class="table-actions-bar">
        <!-- 筛选栏 -->
        <div class="filter-group">
            <select class="form-select"><option>不限告警类型</option></select>
            <select class="form-select"><option>不限设备类型</option></select>
            <input type="date" class="form-input">
            <span>至</span>
            <input type="date" class="form-input">
            <select class="form-select"><option>结果日期</option></select>
            <input type="text" class="form-input" placeholder="输入站点或设备名称">
            <button class="btn btn-primary">查询</button>
        </div>
        <!-- 操作组 -->
        <div class="actions-group">
            <button class="btn btn-primary">导出</button>
            <button class="btn btn-default">打印</button>
            <button class="btn btn-default">刷新</button>
        </div>
      </div>
      <div class="table-container">
        <table class="data-table">
          <thead>
            <tr>
              <th><input type="checkbox"></th>
              <th>设备名称</th><th>所在地区</th><th>告警类型</th><th>告警时间</th><th>告警截图</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(alarm, index) in alarms" :key="index">
              <td><input type="checkbox"></td>
              <td>{{ alarm.deviceName }}</td>
              <td>{{ alarm.area }}</td>
              <td>{{ alarm.type }}</td>
              <td>{{ alarm.time }}</td>
              <td>
                <img v-if="alarm.screenshot" :src="alarm.screenshot" alt="告警截图" style="height: 40px;">
                <span v-else>/</span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="pagination-bar">
        <span class="total-count">共 80 条数据</span>
        <!-- 分页器... -->
      </div>
    </div>
  </main>
</template>

<script setup>
import { ref } from 'vue';

const alarms = ref([
  { deviceName: 'XXX公司排污出口', area: '12区', type: '人员入侵', time: '2023-11-10 15:00:53', screenshot: 'https://via.placeholder.com/100x50.png?text=Image' },
  { deviceName: 'XXX公司排污出口', area: '34区', type: '异常事件', time: '2023-11-10 15:00:53', screenshot: 'https://via.placeholder.com/100x50.png?text=Image' },
  { deviceName: 'XXX公司排污出口', area: '12区', type: '设备掉线', time: '2023-11-10 15:00:53', screenshot: null },
]);
</script>

<style scoped>
/* 此页面可复用全局表格样式，无需额外样式 */
</style>